<script setup lang="ts">
/**
 * @title -汽车抵押贷申请
 * @author -qqz
 * @date -2024-03-05
 */
import {ref, onMounted} from "vue";
import {useRouter} from "vue-router";
import {areaList} from '@vant/area-data';
import {UserPreferenceStore} from "@/utils/UserPreferenceStore.ts";
import {hideTextAtIndex} from "@pureadmin/utils";
import {showToast} from "vant";
import {applicationLoan} from "@/api/apply.ts";

const router = useRouter();

const showTerm = ref(false);
const showPicker = ref(false);
const columns = [
  {text: '无车', value: 'Hangzhou'},
  {text: '本名下有车,无贷款', value: 'goodBoy'},
  {text: '本人名下有车,有按揭贷款', value: 'Wenzhou'},
  {text: '本人名下有车,但已被抵押', value: 'Shaoxing'},
];

const actions = [
  {name: '1个月', value: 1},
  {name: '6个月', value: 6},
  {name: '12个月', value: 12},
  {name: '24个月', value: 24},
  {name: '36个月', value: 36},
];

onMounted(() => {
  // 前端工具类文档：https://pure-admin-utils.netlify.app/utils/substring/substring
  let phone = UserPreferenceStore.getInstance().getPhone();
  formSubmit.value.phone = hideTextAtIndex(phone, {start: 3, end: 6});
})

export type RootObject = {
  name: string;
  phone: string;
  licensePlate: string;
  city: string;
  vehicleCondition: string;
  loanAmount: string;
  loanTerm: string;
  loanTermTxt: string;
}


const formSubmit = ref<RootObject>({
  name: '',
  phone: '',
  licensePlate: '',
  vehicleCondition: '',
  city: '',
  loanAmount: '',
  loanTerm: '',
  loanTermTxt: '',
})

/**
 * 贷款周期
 * @param item
 */
const onSelect = (item: any) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  formSubmit.value.loanTermTxt = item.name;
  formSubmit.value.loanTerm = item.value;
  showTerm.value = false;

}

/**
 * 确认选择车辆情况
 * @param selectedOptions
 */
const onConfirm = ({selectedOptions}: any) => {
  formSubmit.value.vehicleCondition = selectedOptions[0]?.text;
  showPicker.value = false;
};


/** 城市选择 start */
const showArea = ref(false);
const onConfirmCity = ({selectedOptions}: any) => {
  showArea.value = false;
  formSubmit.value.city = selectedOptions.map((item: any) => item.text).join('/');
};

/** 城市选择 end */


/**
 * 提交数据
 */
const onSubmit = () => {
  applicationLoan(formSubmit.value).then((res: any) => {
    showToast({message: res.msg});
    // 回到申请页面
    router.push({name: 'index'})

  }).catch((err: any) => {
    console.log(err);
  });
};

const back = () => {
  history.back()
}

</script>

<template>

  <div class="img-container van-fade-enter-active">
    <van-nav-bar
        left-text=""
        left-arrow
        @click-left="back"/>

    <img style="width: 100%;" src="../../../assets/image/car-apply/ico_car_header.png">

    <div class="overlay-div">
      <!-- 卡片容器 -->
      <div class="card">
        <!-- 卡片内容 -->
        <div class="content">
          <van-form @submit="onSubmit">
            <van-field v-model="formSubmit.name" maxlength="10" label="真实姓名" placeholder="请输入真实姓名"/>
            <van-field v-model="formSubmit.phone" maxlength="11" disabled label="手机号" placeholder="请输入手机号"/>
            <van-field v-model="formSubmit.loanAmount" maxlength="11" type="digit" label="申请金额"
                       placeholder="请输入申请金额"/>
            <van-field v-model="formSubmit.vehicleCondition" is-link readonly name="picker" label="车辆情况"
                       placeholder="点击选择" @click="showPicker = true"/>

            <van-field v-model="formSubmit.licensePlate" v-show="formSubmit.vehicleCondition === '本名下有车,无贷款'"
                       maxlength="10" label="车牌号"
                       placeholder="如:京A88888"/>

            <van-field v-model="formSubmit.city" is-link readonly name="area" label="所在城市"
                       placeholder="点击选择省市区"
                       @click="showArea = true"/>

            <van-field v-model="formSubmit.loanTermTxt" is-link readonly name="area" label="使用周期"
                       placeholder="使用周期"
                       @click="showTerm = true"/>

            <van-button size="large" type="success" round block
                        native-type="submit">
              提交申请
            </van-button>
          </van-form>
        </div>
      </div>

      <div class="card" style="margin-top: 12px;">
        <div style="display: flex;flex-direction: column;text-align: center;padding: 12px;">
          <span style="color: #CCA872;">产品介绍</span>
          <p
              style="
              text-align: left;
    font-size: .74667rem;
    color: #333;
    letter-spacing: 0;
    padding: 0.2rem 1.65333rem 0.200rem;">
            本产品由第三方合作机构提供。客户将自有车辆产权抵押，直接获取贷款，贷款资金可用于各种消费，抵押之后车辆仍归客户自行使用，贷款结清后解除抵押。</p>
        </div>
      </div>

      <div class="card" style="text-align: center;margin-top: 12px;padding-bottom: 25px;padding-top:25px;">
        <span>申请流程</span>
        <div style="padding-top: 15px; display: flex;flex-direction: row;justify-content: space-evenly">
          <div class="header-container">
            <img class="header-img" src="../../../assets/image/car-apply/ico_apply.png">
            <p
                class="header-text">在线申请</p>
          </div>


          <div class="header-container">
            <img class="header-img" src="../../../assets/image/car-apply/ico_verify.png">
            <p
                class="header-text">人工审核</p>
          </div>


          <div class="header-container">
            <img class="header-img" src="../../../assets/image/car-apply/ico_sign.png">
            <p
                class="header-text">审核完成</p>
          </div>

          <div class="header-container">
            <img class="header-img" src="../../../assets/image/car-apply/ico_money_i.png">
            <p class="header-text"
            >放款到账</p>
          </div>
        </div>
      </div>

      <div class="card" style="display: flex;flex-direction: column;margin-top: 12px;">
        <span style="text-align: center;padding-bottom: 12px;">申请条件</span>
        <div style="text-align: center;
    font-size: .74667rem;
    color: #333;
    letter-spacing: 0;">
          <p>1、年龄18到60周岁，本人名下车辆 </p>
          <p> 2、持有3个月以上，车龄10年内 </p>
        </div>
      </div>

      <div class="footer">
        <p>鑫盛源不会以任何名义向您收取费用，更不会要求您进行转账、</p>
        <p>提供银行密码、缴纳保证金等。请您注意识别，谨防伪冒诈骗行为。</p>
      </div>

    </div>
  </div>

  <!-- 车辆情况 -->
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false"/>
  </van-popup>

  <!-- 选择省份 -->
  <van-popup v-model:show="showArea" position="bottom">
    <van-area :area-list="areaList" @confirm="onConfirmCity" @cancel="showArea = false"/>
  </van-popup>

  <van-action-sheet v-model:show="showTerm" :actions="actions" @select="onSelect" cancel-text="取消"
                    close-on-click-action @cancel="showTerm=false"/>

</template>

<style scoped>


/* 头部容器样式 */
.header-container {
  text-align: center; /* 让内部元素居中对齐 */
}

/* 图片样式 */
.header-img {
  width: 1.6rem; /* 图片宽度占据容器的100% */
  max-width: 400px; /* 设置图片最大宽度，根据实际需求调整 */
  height: auto; /* 让高度自动适应宽度变化 */
  display: block; /* 让图片水平居中显示 */
  margin: 0 auto; /* 通过设置左右外边距实现水平居中 */

}

/* 文字样式 */
.header-text {
  margin-top: 0.57333rem; /* 调整文字与图片之间的间距，根据实际需求调整 */
  color: #333; /* 设置文字颜色，根据实际需求调整 */
  font-size: .84rem;
}

.img-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.overlay-div {
  position: absolute;
  top: 80%;
  left: 50%;
  width: 90%;
  height: 100%;
  transform: translateX(-50%) translateY(5%);
}

.footer {
  font-size: .58667rem;
  color: #999;
  letter-spacing: 0;
  text-align: center;
  padding-bottom: 15px;
}

</style>
